<!DOCTYPE html>
<html>
<head>
	<title>装箱 | 追溯系统</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
	<meta name="viewport"
	      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
	<van-nav-bar safe-area-inset-top></van-nav-bar>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    body {
        height: 100vh;
    }

    button {
        height: 30vh;
        width: 90%;
        margin-left: 5%;
        margin-top: 5%;
    }
</style>
<body>
<div id="app">
	<van-nav-bar
		title="装箱"
		left-text="登录/注销"
		left-arrow
		@click-left="onClickLeft"></van-nav-bar>
	<form>
		<button id="btn_file_big" type="button" class="btn btn-outline-info btn-lg" onclick="file_A_btn_click()">包装盒
		</button>
		<input type="file" id="fileSelector" name="filename" hidden>
	</form>

	<form>
		<button id="btn_file_small" type="button" class="btn btn-outline-info btn-lg" onclick="file_B_btn_click()">商品
		</button>
		<input type="file" id="fileSelector_B" name="filename_B" hidden>
	</form>

	<div style="margin: 16px;">
		<van-button round block type="info" @click="updateAll()">提交</van-button>
	</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    let bigBox = '';
    let smallBox = '';
    let flag = 0;
    let timeName = Date.parse(new Date()).toString();

    new Vue({
        el: '#app',
        methods: {
            onClickLeft() {
                localStorage.clear();
                window.location.href = "login.html";
            }
        }
    })

    function file_A_btn_click() {
        $("#fileSelector").click();
    }

    function file_B_btn_click() {
        $("#fileSelector_B").click();
    }
    function isImage(str) {
        let reg = /.(png|jpg|jpeg|webp)$/;
        return reg.test(str);
    }
    //获取已选择文件信息
    let selectedFile; //选择文件
    let filename;   // 文件名字
    $("#fileSelector").change(function () {  //这是用户操作时候执行的函数
        selectedFile = document.getElementById('fileSelector').files[0]; //通过操作com拿到用户选择的文件，当然这里也可以操作jquery拿数据
        filename = selectedFile.name; //文件.name是获取源文件的文件名（固定用法）
        console.log("A文件的名字是：" + filename);//这行是日志
        if (isImage(filename)){
            update();
        }else {
            alert("请上传【png|jpg|jpeg】格式图片");
            location.reload();
        }
    });


    $("#fileSelector_B").change(function () {  //这是用户操作时候执行的函数
        selectedFile = document.getElementById('fileSelector_B').files[0]; //通过操作com拿到用户选择的文件，当然这里也可以操作jquery拿数据
        filename = selectedFile.name; //文件.name是获取源文件的文件名（固定用法）
        console.log("B文件的名字是：" + filename);//这行是日志
        if (isImage(filename)){
            update();
        }else {
            alert("请上传【png|jpg|jpeg】格式图片");
            location.reload();
        }
    });

    //上传至腾讯对象存储
    function update() {
        /*这部分是获取签名*/
        var cos = new COS({
            SecretId: 'AKIDNxfkZHfLjqphPySo0wcGixay75yddOSF',
            SecretKey: 'teBWnT2PYUJgv8NbhvwqgMmOwIS9vqb6',
        })
        /*这部分是腾讯提供的上传的接口*/
        cos.putObject({
            Bucket: 'tencent-oss-1301538052',  //存储桶用户识别   （必须有）
            Region: 'ap-shanghai',     //地区识别（必须有）
            Key: timeName + filename,  //文件名字（这里需要注意的是，如果名字是一样的，那么后面的会覆盖前面的，所以这个名字不可以重复）（必须有）
            StorageClass: 'STANDARD',//可以不写
            Body: selectedFile, //上传文件对象（可以不写）
            onProgress: function (progressData) {
                console.log("" + JSON.stringify(progressData));
            }
        }, function (err, data) {
            console.log("已成功上传至腾讯云COS");
            getQRCodeInfo(data.Location);
        });

    }

    //解析二维码信息并查询追溯信息
    function getQRCodeInfo(location) {
        let urlBase_A = "https://api.binstd.com/qrcode/read?qrcode=";
        let urlBase_B = "&appkey=6a484a58baf1e0de";
        let urlPicAddress = "https://" + location;
        let url = urlBase_A + urlPicAddress + urlBase_B;
        console.log(url);
        $.ajax({
            url: url,
            method: "get",
            dataType: 'jsonp',
            success: function (result) {
                console.log(result.result.split("=")[1]);
                if (flag === 0) {
                    bigBox = result.result.split("=")[1];
                    flag++;
                } else {
                    smallBox = result.result.split("=")[1];
                    flag = 0;
                }
            }
        });
    }

    function updateAll () {
        if (smallBox !== '' && bigBox !== '') {
            let url = "http://1.15.139.169:8082/container/add";
            $.ajax({
                url: url,
                method: "post",
                data: {
                    smallId: smallBox,
                    bigId: bigBox,
                    remark: '无'
                },
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Authorization", localStorage.getItem("TOKEN"));
                },
                success: function (result) {
                    if (result){
                        alert("装箱成功！")
                    }else{
                        alert("装箱失败！请重试！")
                    }
                }
            });
        }
    }
</script>
</html>
